<template>
  <div class="disass">
    <dnav :data="['任务管理', '分配任务']" />
    <el-card>
      <div slot="header" class="clearfix">
        <span>添加任务</span>
      </div>
      <el-form
        ref="assform"
        :model="assform"
        :rules="assrules"
        label-width="100px"
      >
        <el-form-item label="任务名称" prop="aname">
          <el-input
            v-model="assform.aname"
            placeholder="请输入用户名称"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务分类" prop="asst_id">
          <el-select
            @change="tabasst"
            v-model="assform.asst_id"
            placeholder="请选择任务分类"
            style="width: 300px"
          >
            <el-option
              v-for="v in asstlist"
              :key="v.asst_id"
              :label="v.asst_name"
              :value="v.asst_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室" prop="room_id">
          <el-select
            v-model="assform.room_id"
            placeholder="请选择科室"
            style="width: 300px"
          >
            <el-option
              v-for="v in roomlist"
              :key="v.room_id"
              :label="v.rname"
              :value="v.room_id"
            ></el-option>
          </el-select> </el-form-item
        ><el-form-item label="记录人" prop="man_id">
          <el-select
            v-model="assform.man_id"
            placeholder="请选择记录人"
            style="width: 300px"
          >
            <el-option
              :disabled="!ismake(v.cid)"
              :label="v.username"
              :value="v.man_id"
              v-for="v in userlist"
              :key="v.man_id"
            >
              <span style="float: left">{{ v.username }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                v.role_name
              }}</span></el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="截止时间" prop="to_time">
          <el-date-picker
            type="date"
            placeholder="截至日期"
            v-model="assform.to_time"
            style="width: 300px"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">分配任务</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asstlist: [], //任务分类
      roomlist: [], //科室分类
      userlist: [], //用户列表
      controll: [], //能完成对应任务的角色列表
      assform: {
        //表单
        aname: "",
        asst_id: "",
        room_id: "",
        man_id: "",
        to_time: "",
      },
      assrules: {
        //表单验证规则
        aname: [{ required: true, message: "不能为空" }],
        asst_id: [{ required: true, message: "不能为空" }],
        room_id: [{ required: true, message: "不能为空" }],
        man_id: [{ required: true, message: "不能为空" }],
        to_time: [{ required: true, message: "不能为空" }],
      },
    };
  },
  methods: {
    onSubmit() {
      //表单验证方法
      this.$refs.assform.validate((valid) => {
        if (valid) {
          console.log(this.assform);
          //发送请求
          this.$api.Disass(this.assform).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              //更新任务
              this.$store.dispatch("getnotass");
              this.$refs.assform.resetFields();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getasst() {
      //获取任务类型
      let res = await this.$api.Getasst();
      if (res.data.code == 200) {
        this.asstlist = res.data.data;
      }
    },
    async getroom() {
      //获取科室
      let res = await this.$api.GetRoom();
      if (res.data.code == 200) {
        this.roomlist = res.data.data;
      }
    },
    async getuser() {
      // 获取用户
      let res = await this.$api.GetUser();
      if (res.data.code == 200) {
        this.userlist = res.data.data;
        console.log(res);
      }
    },
    tabasst(v) {
      //切换任务分类v 是任务分类id
      console.log(v);
      this.controll = this.asstlist.find((i) => i.asst_id == v).controll; // 找能够完成此任务的角色
      console.log(this.controll);
    },
    ismake(cid) {
      console.log(cid);
      return this.controll.some((v) => v.cid == cid);
    },
  },
  mounted() {
    this.getuser();
    this.getasst();
    this.getroom();
  },
};
</script>

<style>
</style>